import React, { useState } from 'react';
import { Button, WhiteSpace, WingBlank, InputItem, Switch, Toast, Checkbox } from 'antd-mobile';
import Banner from './Banner';


const CheckboxItem = Checkbox.CheckboxItem;
function Home() {
    function loadingToast() {
        Toast.loading('Loading...', 1, () => {
            console.log('Load complete !!!');
        });
    }
    const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);

    const [checked, setChecked] = useState(false)

    const data = [
        { value: 0, label: 'Ph.D.' },
        { value: 1, label: 'Bachelor' },
        { value: 2, label: 'College diploma' },
    ];
    function onChange(e, a) {
        console.log(e)
        console.log(a.target.checked)
    }
    return (
        <>
        <Banner />
        <div className="button-box">
        <Button>按钮</Button>
        <WhiteSpace />
        <Button type="primary">primary</Button><WhiteSpace />

        <WingBlank>
            <Button type="primary">primary</Button><WhiteSpace />
        </WingBlank>

        <Switch
            checked={checked}
            onChange={() => {
                setChecked(!checked)
                console.log(checked)
            }}
        />
        <Button onClick={loadingToast}>loading</Button>
    </div>
        <InputItem
            type='password'
            placeholder="start from right"
            clear
            onChange={(v) => { console.log('onChange', v); }}
            onBlur={(v) => { console.log('onBlur', v); }}
        >光标在右</InputItem>
        <div>
            {data.map(i => (
                <CheckboxItem key={i.value} onChange={(e) => onChange(i.value, e)}>
                    {i.label}
                </CheckboxItem>
            ))}

        </div>
        </>
    )
}
export default Home